<template>
    <Modal
            class-name="system-role-dialog-wrap"
            :mask-closable="false"
            v-model="visible"
            title="角色信息"
            width="450"
            @on-cancel="close">

        <Form :ref="validRef" :model="formData" :label-width="80" @submit.native.prevent j-loading="role.saveInfo,role.getInfo">
            <FormItem v-if="operateType === 'new' && parentParam.name" label="上级节点" prop="parentId" :rules="{required: true, message: '不能为空'}">
                <Input v-model="parentParam.name" placeholder="未获取到上级节点" disabled/>
            </FormItem>

            <FormItem label="角色名称" prop="name" :rules="[{required: true, message: '请填写'}, {max: 50, message: '最多输入50个字符'}]">
                <Input v-model="formData.name" placeholder="请输入角色名称"/>
            </FormItem>

            <FormItem label="角色编码" prop="code" :rules="[{required: true, message: '请填写'}, {max: 50, message: '最多输入50个字符'}]">
                <Input v-model="formData.code" placeholder="请输入角色编码" :disabled="!!formData.id"/>
            </FormItem>

            <FormItem label="绑定菜单" prop="resources" :rules="{required: true, message: '请选择'}">
                <Input readonly :value="bindMenuBtnText" class="bind-menu-input" @click.native="handleBindMenu"/>
            </FormItem>

            <FormItem label="备注信息" prop="remark" :rules="{max: 255, message: '最多输入255个字符'}">
                <Input v-model="formData.remark" type="textarea" placeholder="请输入备注信息" :rows="3" resize="none" :disabled="readonly"/>
            </FormItem>
        </Form>

        <template slot="footer">
            <Button class="button-wide" type="primary" @click="submitHandler" :disabled="querying || submitting">提交</Button>
        </template>

        <bind-menu ref="bindMenuDialogRef" @save="handleMenuSave"/>
    </Modal>
</template>

<script>
    import JBoot from "jboot-env";

    export default JBoot.form({
        components: {
            'bind-menu': require('./bind-menu').default
        },

        data() {
            return {
                moduleName: 'role',
	            autoAddLoading: false
            }
        },

        computed: {
            bindMenuBtnText ({formData}){
                const {resources} = formData;

                return this.$isEmpty(resources) ? '点击绑定菜单' : `已绑定 ${resources.length} 个菜单`;
            }
        },

        methods: {
            getDefFormData() {
                return {
                    parentId: this.parentParam.parentId || '0',
                    sort: 999
                };
            },

            handleBindMenu (){
                const {resources} = this.formData;

                this.$getRef('bindMenuDialogRef').__open({resources});
            },

            handleMenuSave (selection){
                this.$set(this.formData, 'resources', selection);
            }
        }
    });
</script>

<style lang="scss">
    .system-role-dialog-wrap {
        & .ivu-form-item {
            margin-bottom: 20px !important;

            &:last-child {
                margin-bottom: 5px !important;
            }
        }

        & .bind-menu-input{
            & > input{
                cursor: pointer;
                color: #ed4014;
                font-weight: bold;
            }
        }
    }
</style>
